<template>
    <view class="search-page" :style="{paddingTop:hoppad+'px'}">
		<search-bar :toppad="toppad">
			<van-search
				id="searchBox"
				:value="searchvalue"
				placeholder="请输入搜索关键词"
				show-action
				background="#F49e37"
				@change="onChange"
				@search="onSearch"
				@cancel="onCancel"
			/>
		</search-bar>
		<search-goods 
			v-if="isSearchList"
			:dataList="list"
		></search-goods>
		<view class="search-text-box" v-else>
			<view class="history-box">
				<view class="title">
					历史搜索
				</view>
				<view class="text-list">
					<text class="item">爱奇艺</text>
				</view>
			</view>
			<view class="search-hot">
				<view class="title">
					热门搜索
				</view>
				<view class="text-list">
					<text class="item" 
						v-for="(item,index) in hotData" 
						:key="index"
						@click="seachList(item)"
					>{{item.name}}</text>
				</view>
			</view>
		</view>
        <!-- #ifdef MP-WEIXIN -->
		<van-toast id="van-toast" />
		<!-- #endif -->
    </view>
</template>
<script>
import { getElSize } from "@/config/util";
import searchBar from "./components/search_bar.vue";
import searchGoods from "./components/seach_goods.vue";
// #ifdef MP-WEIXIN
import Toast from '@/wxcomponents/vant-weapp/toast/toast.js';
// #endif
import { gethotsearchApi , getproductData , userbehaviorApi} from "@/api/getdata";
export default {
    name:"searchPage",
	components:{
		"search-bar":searchBar,
		"search-goods":searchGoods,
	},
    data(){
        return {
            hotData:[],
			isSearchList:false,
			searchvalue:"",
			list:[],
			toppad:0,
			hoppad:0
        }
    },
	onLoad() {
		this.getTab();
		this._initData();
	},
    methods:{
        async _initData(){
            try {
                uni.showLoading({title:"加载中"});
                let data = await gethotsearchApi();
                data.map((item)=>{
                    for (var key in item) {
                        item.name = key;
                        item.value = item[key];
                    }
                });
                this.hotData = data;
                uni.hideLoading();
            } catch (e) {
                uni.hideLoading();
				// #ifdef MP-WEIXIN
				Toast.fail(e.errMsg);
				// #endif
            }
		},
		// 动态设置头部高度
		async getTab(){
			try {
				let tabar = await getElSize("searchBox");
				this.toppad = this.CustomBar - tabar.height + 5;
				this.hoppad = this.CustomBar;
			} catch (error) {
				console.log(error)
			}
		},
		async seachList(item){
            try {
                uni.showLoading({title:"加载中"});
                let res = await getproductData({
                    prod_name: item.name,
                    channel: this.$store.getters.mychannel,
                });
                if(res){
                    this.list = res;
					this.isSearchList = true;
				};
                uni.hideLoading();
            } catch (e) {
				uni.hideLoading();
				
            }
        },
		onSearch(){
			this.seachList({
				name:this.searchvalue,
			})
		},
		onCancel(){
			this.searchvalue = "";
			this.isSearchList = false;
		},
		onChange(e){
			this.searchvalue = e.detail;
		}
    }
}
</script>
<style lang="scss" scoped>
    @import "./style/index.scss";
</style>